<template>
    <div class="pager" v-if="total > 0">
        <a :class="{disabled: page === 1}" @click="pageChange(page-1)">上一页</a>
        <a v-for="item in pageArray" :key="item" :class="{active: page == item}" @click="pageChange(item)">{{item}}</a>
        <a :class="{disabled: page === pages}" @click="pageChange(page+1)">下一页</a>
        <span>第<i>{{page}}</i>/<i>{{pages}}</i>页</span>
        <span>共<i>{{total}}</i>条记录</span>
    </div>
</template>

<script>
    export default {
        name: "Pager",
        props: {
            // 总数
            total: {
                type: Number,
                default: 0
            },
            // 第几页
            page: {
                type: Number,
                default: 1
            },
            // 每页显示的记录
            limit: {
                type: Number,
                default: 10
            },
            // 显示页数按钮
            pageCount: {
                type: Number,
                default: 8
            }
        },
        data() {
            return {
                pageArr: this.pageArray
            }
        },
        computed: {
            // 计算当前总页数
            pages() {
                return Math.ceil(this.total / this.limit);
            },
            // 计算要显示的最小页
            minPage() {
                let min = Math.ceil(this.page - this.pageCount / 2);
                if (min < 1){
                    min = 1;
                }
                return min;
            },
            // 计算要显示的最大页
            maxPage(){
              let max = this.minPage + this.pageCount-1;
              if (max > this.pages){
                  max = this.pages;
              }
              return max;
            },
            // 计算页码数组
            pageArray(){
                let arr = [];
                for (let i = this.minPage; i <= this.maxPage; i++) {
                    arr.push(i);
                }
                return arr;
            }

        },
        methods: {
            pageChange(newPage) {
                // 要跳转的页数小于1，则直接赋值当前页数=1
                if (newPage < 1) {
                    newPage = 1;
                    // 要跳转的页数大于总页数，则直接赋值当前页=总页数
                } else if (newPage > this.pages) {
                    newPage = this.pages;
                }
                // 当前页和要跳转的页数一样，则直接return
                if (this.page === newPage) {
                    return;
                }
                this.$emit('pageChange', newPage)
            },
        }
    }
</script>

<style scoped>
    .pager {
        display: flex;
    }

    .pager a {
        padding: 4px 14px;
        margin: 0 1px;
        border: 1px solid #C0C4CC;
        border-radius: 2px;
        cursor: pointer;
        /*文字不被选中*/
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .disabled {
        background-color: #E4E7ED;
        cursor: none;
        color: #C0C4CC;
    }

    .active {
        background-color: #409EFF;
        color: white;
    }

    span {
        line-height: 30px;
        margin-left: 12px;
    }

    span i {
        font-style: normal;
        padding: 0 2px;
    }
</style>
